<template>
	<view>

		<progress :percent="per" show-info="true" stroke-width="20" />

		<view class="done" v-show="isShow">加载完成 <icon type="success" color="#42b983" size="16px"></icon>
		</view>

		<button type="primary" :loading="isLoading" @click="btnLoad">button</button>

		<input type="text" v-model="msg" maxlength="6" placeholder="再次输入6位密钥" placeholder-class="red" @blur="cc">

		<textarea placeholder="再次输入textarea的值" @blur="cc" v-model="msg"></textarea>

		<view>你讨厌下面那个人</view>
		<radio-group @change="selectRadio">
			<radio value="1"></radio>A
			<radio value="2"></radio>B
			<radio value="3"></radio>C
			<radio value="4"></radio>D
		</radio-group>

		<view>你喜欢吃下列哪种水果</view>
		<checkbox-group @change="selectRadio">
			<checkbox value="1"></checkbox>A.苹果
			<checkbox value="2"></checkbox>B.菠萝
			<checkbox value="3"></checkbox>C.梨
			<checkbox value="4"></checkbox>D.西瓜
		</checkbox-group>

		<switch checked="true" @change="cc" color="#42b983" /> 喜欢吗？

		<view>你喜欢的城市{{city}}</view>
		<picker @change="bindPickerChange" :value="index" :range="array">
			<view class="uni-input">请选择</view>
		</picker>

		<view>设置闹钟</view>
		<picker type="" mode="time">
			<view class="uni-input">请选择</view>
		</picker>

		<view>设置日期</view>
		<picker type="" mode="date">
			<view class="uni-input">请选择</view>
		</picker>

		<view>设置多列</view>
		<picker type="" mode=multiSelector :range="multi" @change="dd">
			<view class="uni-input">请选择</view>
		</picker>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const state = reactive({
				per: 0,
				isShow: false,
				isLoading: false,
				msg: "",
				array: ["武汉", "成都", "上海", "杭州"],
				index: 0,
				city: "",
				multi: [
					["A", "B", "C"],
					["1", "2", "3"]
				]
			})

			const loading = () => {

				var timer = setInterval(() => {

					state.per++

					if (state.per >= 100) {
						clearInterval(timer);
						state.isShow = true;
					}

				}, 50);

			}
			loading();

			const btnLoad = () => {
				state.isLoading = true;

				setTimeout(() => {
					state.isLoading = false;
				}, 2000)
			}

			const cc = (e) => {
				console.log(e.detail.value);
			}
			const dd = (e) => {
				
				let a=e.detail.value[0];
				let b=e.detail.value[1];
				console.log(state.multi[0][a],state.multi[1][b]);
				
			}
			const selectRadio = (e) => {
				console.log(e.detail.value);
			}

			const bindPickerChange = (e) => {

				console.log(e);
				state.city = state.array[e.detail.value];

			}

			return {
				...toRefs(state),
				btnLoad,
				cc,
				dd,
				selectRadio,
				bindPickerChange
			}
		}
	}
</script>

<style scoped>
	.done {
		width: 100%;
		text-align: center;
	}

	.red {
		color: red;
	}

	checkbox,
	radio {
		transform: scale(.7);
	}
</style>
